<template>
  <div id="merge-city">
    <!-- 图片 -->
    <div class="center-banner"></div>
    <!-- 文章 -->
    <div class="article-container">
      <div class="text-box">
        <!-- 目录 -->
        <div class="tab-box">
          <!-- 标题 -->
          <a href="javascript:;" :class="{active: liActiveGroup == 1}" @click="comeback">
            归国求职必读
          </a>
          <a href="javascript:;" :class="{active: liActiveGroup == 2}" @click="hotbusiness">
            热门行业知识
          </a>
        </div>
      </div>
      <!-- 内容 -->
      <div class="article-box">
        <!-- 归国求职文章 -->
        <div class="list-news" v-if="isShow">
          <ul>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/秋招.jpeg" alt="应届生必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【应届生必读】秋招如何谈薪资
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;最近两天秋招开始进入了正式批，各大公司也在陆陆续续的约投递者面试，在面试的过程中免不了谈薪资，那么薪资结构是怎么样的？该如何和hr谈薪资呢？跟着小助手一起来看看吧。
                  薪资组成有什么？
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/出彩.png" alt="应届生必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】职场新人如何让工作更出彩
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;应届生初入职场常常处于一种不知所措的状态，不知道如何安排自己的工作，也不知道怎么让自己的工作更出彩，今天小助手就来帮大家盘点一下做好哪些方面可以帮助自己的工作增光添彩。
                  1、做工作要有亮点，没有亮点...
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/增加.png" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】职场新人如何增加自己的不可替代性
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;新人刚进入职场，每天都不知道怎么安排自己的工作，也不知道通过哪种途径来增加自己的不可替代性，对此小助手给大家一些小建议。
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/职场.png" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】如何get职场自学能力
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;现在的职场变化和知识更新非常快，所以我们需要有自我学习，自我更新的能力。但是职场人并没有那么多时间去系统的上课，下班后通常要靠自学。虽然大家都想拥有自学能力，但是有时人们可能会陷入误区，把过程误认为结
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/高情商.jpeg" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】如何成为高情商的职场人
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;走出校园，走进职场，情商的比重会上升。除了极少数技术岗位外，大部分岗位对智商要求不算苛刻。业务能力的强弱、人际关系的融洽、适应公司环境的能力，往往都取决于情商的高低。有时候情商比努力工作更重要，那么我
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
          </ul>
          <div class="page">
            <a href="javascript:;">浏览更多</a>
          </div>
        </div>
        <!-- 热门行业文章 -->
        <div class="list-news" v-else>
          <ul>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/秋招.jpeg" alt="应届生必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【应届生必读】秋招如何谈薪资
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;最近两天秋招开始进入了正式批，各大公司也在陆陆续续的约投递者面试，在面试的过程中免不了谈薪资，那么薪资结构是怎么样的？该如何和hr谈薪资呢？跟着小助手一起来看看吧。
                  薪资组成有什么？
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/出彩.png" alt="应届生必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】职场新人如何让工作更出彩
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;应届生初入职场常常处于一种不知所措的状态，不知道如何安排自己的工作，也不知道怎么让自己的工作更出彩，今天小助手就来帮大家盘点一下做好哪些方面可以帮助自己的工作增光添彩。
                  1、做工作要有亮点，没有亮点...
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/增加.png" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】职场新人如何增加自己的不可替代性
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;新人刚进入职场，每天都不知道怎么安排自己的工作，也不知道通过哪种途径来增加自己的不可替代性，对此小助手给大家一些小建议。
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/职场.png" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】如何get职场自学能力
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;现在的职场变化和知识更新非常快，所以我们需要有自我学习，自我更新的能力。但是职场人并没有那么多时间去系统的上课，下班后通常要靠自学。虽然大家都想拥有自学能力，但是有时人们可能会陷入误区，把过程误认为结
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
            <li>
              <div class="img-wrap">
                <a href="javascript:;">
                  <img src="./images/高情商.jpeg" alt="职场小白必读">
                </a>
              </div>
              <div class="text-wrap">
                <p class="text-title">
                  <a href="javascript:;">
                    【职场小白必读】如何成为高情商的职场人
                  </a>
                </p>
                <p class="summary">
                  &nbsp;&nbsp;&nbsp;&nbsp;走出校园，走进职场，情商的比重会上升。除了极少数技术岗位外，大部分岗位对智商要求不算苛刻。业务能力的强弱、人际关系的融洽、适应公司环境的能力，往往都取决于情商的高低。有时候情商比努力工作更重要，那么我
                </p>
                <p class="info">
                  <span class="author">直职小助手</span>
                  <em>.</em>
                  <span class="time">2022-09-06</span>
                </p>
              </div>
              <div style="clear: both"></div>
            </li>
          </ul>
          <div class="page">
            <a href="javascript:;">浏览更多</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TheArticle",
  data() {
    return {
      isShow: true,
      liActiveGroup: 1,
    }
  },
  methods: {
    comeback() {
      this.isShow = true
      this.liActiveGroup = 1
    },
    hotbusiness() {
      this.isShow = false
      this.liActiveGroup = 2
    }
  }
};
</script>

<style lang="less" scoped>
#merge-city {
  width: 1184px;
  margin: 0 auto;

  .center-banner {
    height: 128px;
    background: url("https://img.bosszhipin.com/static/file/2022/fqu5oc98v91643185010001.png");
    background-size: cover;
  }

  .article-container {
    margin-top: 40px;

    .text-box {
      height: 50px;
      background-color: white;

      .tab-box {
        width: 238px;
        margin: 0 auto;
        line-height: 50px;
        display: flex;
        justify-content: space-between;

        a {
          display: block;
          width: 84px;
          height: 50px;
          font-size: 14px;
        }

        .active {
          height: 47px;
          color: #00c2b3;
          font-weight: 500;
          border-bottom: 3px solid #00c2b3;
        }
      }
    }

    .article-box {
      .list-news {
        ul {
          li {
            height: 162px;
            background-color: white;
            margin: 10px 0;
            padding: 30px;

            .img-wrap {
              width: 284px;
              height: 162px;
              float: left;

              img {
                width: 100%;
              }
            }

            .text-wrap {
              width: 790px;
              height: 162px;
              float: left;
              margin-left: 49px;

              .text-title {
                a {
                  font-size: 20px;
                  color: #414a60;

                  &:hover {
                    color: #00d7c6;
                  }
                }
              }

              .summary {
                height: 75px;
                font-size: 14px;
                padding-top: 30px;
                margin-bottom: 15px;
              }

              .info {
                line-height: 5px;
                font-size: 14px;
                color: #414a60;
              }
            }
          }
        }

        .page {
          height: 100px;
          padding-bottom: 20px;
          line-height: 60px;

          a {
            display: block;
            height: 60px;
            background-color: white;
            font-size: 16px;
            text-align: center;
            color: #bbb;

            &:hover {
              color: #53cac3;
            }
          }
        }
      }
    }
  }
}
</style>